<template>
  <div id="login">
    <div class="login">
      <div class="login-platform">
        <div class="title">{{ sysTitle || settings.title }}</div>
        <div class="sub-title">{{ sysEnTitle ||settings.enTitle }} </div>
        <div class="line"></div>
      </div>
      <div class="login-content">
        <div class="login-form">
          <div class="title">欢迎登录</div>
          <div class="line"></div>
          <div class="form-item">
            <div class="form-item-content">
              <i class="el-icon-user" />
              <input
                v-model="loginForm.username"
                type="text"
                placeholder="请输入用户名"
                :disabled="isLoading"
                :style="{cursor:isLoading?'no-drop':''}"
                @keyup.enter="handleLogin"
              >
            </div>
          </div>
          <div class="form-item">
            <div class="form-item-content">
              <i class="el-icon-lock" />
              <input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                :disabled="isLoading"
                :style="{cursor:isLoading?'no-drop':''}"
                @keyup.enter="handleLogin"
              >
            </div>
          </div>
          <div v-if="isShowCap" class="form-item">
            <div class="form-item-content">
              <i class="el-icon-chat-line-square" />
              <input v-model="loginForm.captcha" placeholder="请输入验证码" @keyup.enter="handleLogin">
              <img class="code-img" :src="capImg" alt="" @click="getCop()">
            </div>
          </div>
          <div class="lcf-click" :class="[isLoading?'is-disabled':'login-btn']" @click="handleLogin">
            <i v-if="isLoading" class="el-icon-loading" />
            <span>登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { sysConfigInfo } from '@/api/basic/platformSet'
import { getCaptcha } from '@/api/user'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        captcha: ''
      },
      isLoading: false,
      passwordType: 'password',
      redirect: undefined,
      settings: require('@/settings'),
      sysTitle: '',
      sysEnTitle: '',
      capImg: '', // 验证码图片
      isShowCap: true // 判断是否需要验证码
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getDetail()
    this.getCop()
  },
  methods: {
    // 默认获取验证码
    async getCop() {
      getCaptcha({ platform: 'ADMIN' }).then((res) => {
        if (res.success) {
          this.isShowCap = res?.data
          this.capImg = res?.data?.base64
        }
      })
    },
    // 获取系统设置信息
    getDetail() {
      sysConfigInfo({ platform: 'ADMIN' }).then(res => {
        if (res.success) {
          const info = res.data.data
          this.sysTitle = info.title ? info.title : this.settings.title
          this.sysEnTitle = info.titleEn ? info.titleEn : this.settings.settings.enTitle
          if (info.favicon) {
            this.getCreate(info.favicon)
          }
        }
      })
    },
    // 网站图标---浏览器图标 动态设置就在拿到数据之后调用这个方法
    getCreate(url) {
      var link = document.querySelector("link[rel*='icon']") || document.createElement('link')
      link.type = 'image/x-icon'
      link.rel = 'shortcut icon'
      link.href = url
      document.getElementsByTagName('head')[0].appendChild(link)
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      if (this.loginForm.username && this.loginForm.username !== '' && this.loginForm.password && this.loginForm.password !== '') {
        if (this.isShowCap) {
          if (this.loginForm.captcha === '') {
            this.$notify.error({ title: '警告', message: `请输入验证码`, type: 'warning' })
            return
          }
        }
        this.isLoading = true
        this.$store.dispatch('user/login', this.loginForm).then(() => {
          this.loginForm.password = ''
          this.$store.state.user.treaty = true
          // 登录后默认跳转首页/dashboard  记录路径this.redirect
          this.$router.push({ path: '/dashboard' || '/' }, () => {})
          // defPwd:true 则提示修改密码，false 则无视
          if (this.$store.state.user.defPwd) {
            this.$message({ showClose: true, message: '当前密码为默认密码，请尽快修改密码！', type: 'warning' })
          }
          this.isLoading = false
        }).catch(() => {
          if (this.isShowCap) {
            this.getCop()
          }
          this.isLoading = false
        })
      } else {
        this.$notify.error({
          title: '警告',
          message: `请输入${!this.loginForm.username ? `用户名` : !this.loginForm.password ? `密码` : `登录信息`}`,
          type: 'warning'
        })
      }
    }
  }
}
</script>
<style lang="scss">
  html, body {
    width: 100%;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
 .code-img {
    margin-left: 14px;
    width: 100px;
    height: 44px;
    border-radius: 8px 8px 8px 8px;
    object-fit: contain;
    cursor: pointer;
  }
  #login {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1200px;
    display: flex;
    flex-direction: column;
    .login {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      background-image: url('~@/assets/bj.png');
      background-repeat: no-repeat;
      background-size: cover;
      .login-platform{
        margin-left: 120px;
        .title{
          width: 100%;
          font-size: 70px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
          cursor: pointer;
        }
        .sub-title{
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          margin: 42px 0 20px 0;
        }
        .line{
          width: 168px;
          height: 5px;
          background: #FFFFFF;
        }
      }
      .login-content {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.1);
        .login-form {
          position: relative;
          width: 560px;
          height: 532px;
          padding: 10px 55px;
          .title {
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 24px;
            letter-spacing: 1px;
            margin-bottom: 13px;
          }
          .line{
            width: 135px;
            height: 4px;
            background: linear-gradient(81deg, #5CB4F2 0%, #5DDDF4 100%);
            margin-bottom: 30px;
          }
          .form-item {
            padding: 20px 0;
            .form-item-content {
              border-bottom: 2px solid #fff;
              border-image: linear-gradient(to right, rgba(98,171,235, 0.8),rgba(98,171,235, 0.8) 20%, rgba(109,224,245, 0.8) 80%,rgba(109,224,245, 0.8)) 1;
              line-height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              i {
                font-size: 20px;
                color: #fff;
                font-weight: 400;
              }
              input {
                outline: none;
                border: 0px;
                flex-grow: 1;
                font-size: 16px;
                font-weight: 400;
                line-height: 40px;
                background: none;
                letter-spacing: 1px;
                text-indent: 0.7em;
                color: #fff;
              }
              input::-webkit-input-placeholder {
                font-size: 14px;
                color: #fff;
                line-height: 40px;
                text-indent: 0.7em;
                letter-spacing: 1px;
              }
            }
          }
          .login-btn {
            margin:40px 0 20px 0;
            line-height:50px;
            background: linear-gradient(90deg, #10AEFC 0%, #0378FF 100%);
            color: #FFF;
            text-align: center;
            cursor: pointer;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            i {
              padding: 0 5px;
              font-size: 16px;
              line-height: 40px;
            }
          }
          .is-disabled {
            margin:40px 0 20px 0;
            line-height: 50px;
            background: linear-gradient(90deg, #10AEFC 0%, #0378FF 100%);
            color: #FFF;
            text-align: center;
            cursor: no-drop;
            border-radius: 2px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            opacity: 0.7;
            i {
              padding: 0 5px;
              font-size: 16px;
              line-height: 40px;
            }
          }
          .cas {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: space-around;
            align-items: center;
            color: #FFFFFF;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            .register{
              color: #E5FF08;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
